<template>
	<view>
		<myhead left="1"></myhead>
		<view class="tit">订单记录</view>
		<view class="nav">
			<view :class="state=='p'?'state':''" data-state="p" @tap="stateBtn">处理中</view>
			<view :class="state=='s'?'state':''" data-state="s" @tap="stateBtn">已完成</view>
			<view :class="state=='f'?'state':''" data-state="f" @tap="stateBtn">已取消</view>
		</view>
		<view class="list" v-for="(item,index) in list" :key="index" :data-id="item.buyerAccountId" :data-ddid="item.id" @tap="ddBtn">
			<view>
				<view>{{item.buyerAccountId==userInfo.id?'购买':'出售'}}<span>{{item.productName}}</span></view>
				<view class="czBtn">{{item.status==0?'未支付':item.status==1?'已支付':item.status==2?'已完成':'已取消'}} ❯</view>
			</view>
			<view>
				<view>
					<view>时间</view>
					<view>{{item.createdTime}}</view>
				</view>
				<view>
					<view>数量（USDT）</view>
					<view>{{item.sumNumber}}</view>
				</view>
				<view>
					<view>交易总额（CNY）</view>
					<view>{{item.sumAmount}}</view>
				</view>
			</view>
			<view>{{item.sellNickName}}</view>
		</view>
		<!-- <view class="list">
			<view>
				<view>购买<span>USDT</span></view>
				<view class="czBtn">已完成 ❯</view>
			</view>
			<view>
				<view>
					<view>时间</view>
					<view>12:12 12/12</view>
				</view>
				<view>
					<view>数量（USDT）</view>
					<view>0.00000000</view>
				</view>
				<view>
					<view>交易总额（CNY）</view>
					<view>0.00000000</view>
				</view>
			</view>
			<view>吴迪美少女汪哥</view>
		</view> -->
	</view>
</template>

<script>
	const http = require('../../utils/http.js');
	export default {
		data() {
			return {
				userInfo:null,
				list:null,
				state:'p',
				pageNum:1,
				pageSize:15
			}
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			if(uni.getStorageSync('userInfo')){
				this.userInfo=uni.getStorageSync('userInfo')
			}else{
				this.userInfo=null
			}
			http.post('/api/purchase/getTradeList',{outStatus:this.state,pageNum:1,pageSize:this.pageSize}).then(res => {
				//console.log(res)
				if (res.code == 200) {
					this.list=res.result.list
					this.hasNextPage= res.result.hasNextPage,
					this.pageNum=2
				}
				uni.hideLoading();
			})
		},
		methods: {
			stateBtn:function(e){
				if(e.currentTarget.dataset.state=='p'){
					this.state='p'
				}
				if(e.currentTarget.dataset.state=='s'){
					this.state='s'
				}
				if(e.currentTarget.dataset.state=='f'){
					this.state='f'
				}
				uni.showLoading({
				    title: '加载中'
				});
				http.post('/api/purchase/getTradeList',{outStatus:this.state,pageNum:1,pageSize:this.pageSize}).then(res => {
					if (res.code == 200 && res.result) {
						this.list=res.result.list
						this.hasNextPage= res.result.hasNextPage,
						this.pageNum=2
						uni.hideLoading();
						if(!res.result.list.length){
							uni.showToast({
							  title: '暂无数据',
							  icon: 'none'
							});
						}
					}
				})
			},
			ddBtn:function(e){
				uni.navigateTo({
					url:"/pages/order/orderDetails?buyerAccountId="+e.currentTarget.dataset.id+'&tradeId='+e.currentTarget.dataset.ddid
				})
			}
		},
		onReachBottom(){
			console.log('onReachBottom')
			uni.showLoading({
				title: '加载中。。。',
				mask: true
			})
			if (this.hasNextPage) {
				http.post('/api/purchase/getTradeList',{outStatus:this.state,pageNum:this.pageNum,pageSize:this.pageSize}).then(res => {
				  if (res.code == 200) {
					this.list= this.list.concat(res.result.list),
					this.hasNextPage= res.result.hasNextPage,
					this.pageNum=res.result.pageNum + 1
				  }
				  uni.hideLoading()
				})
			}else{
				uni.hideLoading()
				uni.showToast({
				  title: '没有更多数据',
				  icon: "none"
				})
			}
		}
	}
</script>

<style>
	.tit{
		padding: 6vw 4vw;
		font-size: 7vw;
		color: #333333;
	}
	.nav{
		display: flex;
		flex-direction: row;
		color: #999999;
		align-items: flex-end;
		margin-bottom: 2vw;
	}
	.state{
		font-size: 5vw;
		font-weight: bold;
		color: #007AFF;
		border-bottom: 1px solid #007AFF;
	}
	.nav>view{
		padding: 2vw 6vw;
		margin-left: 6vw;
	}
	.list{
		padding: 2vw 6vw;
		border-bottom: 1px solid #F2F2F2;
	}
	.list>view:nth-child(2){
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 3.2vw;
	}
	.list>view:nth-child(1){
		font-size: 3.8vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}
	.list>view:nth-child(1)>view:nth-child(1) span{
		color: #007AFF;
		margin-left: 2vw;
	}
	.list>view:nth-child(1){
		margin-bottom: 4vw;
	}
	.list>view:nth-child(2){
		color: #666666;
	}
	.list>view:nth-child(2)>view>view:nth-child(1){
		margin-bottom: 2vw;
		color: #999999;
	}
	.list>view:last-child{
		font-size: 3.8vw;
		margin-top: 4vw;
	}
	.czBtn{
		font-size: 3.2vw;
		color: #999999;
	}
</style>
